{% extends 'base.html' %}
{% load static %}

{% block title %}
{{ article.title }}
{% endblock %}

{% block content %}
    {% block mycss %}
        {{ block.super }}
        <link type="text/css" href="https://cdn.bootcss.com/highlight.js/9.15.8/styles/github.min.css" rel="stylesheet">

        <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/m.css' }}"  rel="stylesheet">
        <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/info.css' }}"  rel="stylesheet">
        <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/article/code.css' }}"  rel="stylesheet">


        <style>
            /* for block of numbers */
            .hljs-ln-numbers {
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;

              text-align: center;
              color: #ccc;
              border-right: 1px solid #CCC;
              vertical-align: top;
              padding-right: 5px;
            }

            .hljs-ln-n {
              width: 30px;
            }

            /* for block of code */
            .hljs-ln .hljs-ln-code {
              padding-left: 10px;
              white-space: pre;
            }
            #submit-comment-btn{
                width: 120px;
                height: 35px;
                border-radius: 5px;
                color: grey;
                background-color:#fff;
                border: 1px solid grey;
                margin-top: 15px;
            }
            #submit-comment-btn:hover{
                border: 1px solid #7d7d7d;
                background-color:#FFEEC2;
                margin-top: 15px;
            }

        </style>
    {% endblock %}

    <article>
        <div class="infos" id="article_content">
            <div class="article-list">
                {% for title in articles %}
                    <img id="image-{{ title }}" style="width: 200px; height: 120px; float: left">
                    <a style="float: left; padding-top: 50px; padding-left: 40px; font-size: 16px">{{ title }}</a>

                    <input type="file" style="display:none" onchange="Upload()" id="id-{{ title }}"/>
                    <input type="button" style="float: right; height: 30px; margin-right: 50px; margin-top: 40px"
                           value="选择图标" onclick='OpenFile("id-{{ title }}")'/>

                    <div style="clear: both; padding-top: 30px"></div>
                {% endfor %}
            </div>
        </div>
    </article>

    <script>
        $("document").ready(function(){
            var img=$("article img");

            for(var i = 0;i < img.length; i++){
                var id = img.get(i).id;
                console.info(id)
                var title = id.substring(6);
                if (id.length > 0){
                    set_image(title, id, true);
                }
            }
        })

        var select_id=''
        function OpenFile(id) {
            select_id = id;
            $("#" + id).click();
        }

        function Upload() {
            var title = select_id.substring(3);
            var fileObj = document.getElementById(select_id).files[0]; // js 获取文件对象
            if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
                alert("请选择文件")
                return;
            }
            var files = $("#" + select_id).val();
            var ex = files.substring(files.indexOf('.'), files.length).toUpperCase();
            //alert(ex)
            if (ex === ".JPG" || ex === ".PNG" || ex === ".GIF") {
                var formFile = new FormData();
                formFile.append("title", title);
                formFile.append("image", fileObj); //加入文件对象

                $.ajax({
                    url: "/article/upload_thumb/",
                    data: formFile,
                    type: "POST",
                    contentType: "json",
                    cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
                    success: function (result) {
                        //result = eval('' + result + '')
                        result = $.parseJSON(result);
                        if (result.status === 'success') {
                            //alert("上传成功");
                            set_image(title, "image-" + title, true);
                        } else {
                            alert(result.msg)
                        }
                    }, error: function (ex) {
                        console.warn(ex)
                    }
                })
            }
            else {
                alert("文件格式不符")
            }
        }
    </script>

{% endblock %}




